import React from 'react';
import Loadable from 'react-loadable';
import { WeaTools } from 'ecCom';

const loadable = (loader, loading = () => null) => Loadable({ loader, loading });
const WeaLicense = loadable(() => import('./WeaLicense'));
const WeaLicenseCluster = loadable(() => import('./WeaLicenseCluster'));

class Index extends React.Component {
  constructor(props) {
    super(props);
    const { location = {}, visible = false } = props;
    const { query = {} } = location;
    const { display = '' } = query;
    this.state = { display, visible, isCluster: false };
    visible && this.isCluster();
  }

  render() {
    const { display, visible, isCluster } = this.state;
    if (display == 'page' || visible) {
      if (isCluster) {
        return <WeaLicenseCluster ecId={`${this && this.props && this.props.ecId || ''}_WeaLicenseCluster@i86wp4`} {...this.props} display={display} visible={visible} onHide={this.onHide} />;
      }
        return <WeaLicense ecId={`${this && this.props && this.props.ecId || ''}_WeaLicense@1wb7am`} {...this.props} display={display} visible={visible} onHide={this.onHide} />;
    }
      return null;
  }

  onShow = () => {
    this.isCluster();
  };

  onHide = () => {
    this.setState({ visible: false });
  };

  isCluster = () => {
    WeaTools.callApi('/api/system/license/isCluster', 'POST').then((result) => {
      this.setState({ visible: true, isCluster: result.isCluster });
    });
  };
}

export default Index;
